<template>
  <div>

    <Panel title="枪扩展信息" useBack>
      <div slot="body" >
        <div class="pile" v-if="!id">
          <div style="display:flex;margin: 20px 0" >
        <div >
        <label>站点：</label>
        <el-select
          style="width:160px"
          v-model="siteId"
          clearable
          placeholder="请选择"
        >
          <el-option  v-for="item of siteList"
            :key="item.id"
            :value="item.id"
            :label="item.name"></el-option>
        </el-select>
      </div>
      <div  style="margin-left: 20px" >
        <el-button icon="el-icon-search" type="default" @click="getPile">查询</el-button>        
      </div>
      </div>
      <div  v-if="pileList.length>0">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group v-model="gunIds" size="small" @change="getIds">
          <el-checkbox :label="item.id" border v-for="(item,index) in pileList" :key="index" >{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </div>
        </div>
        <div class="pile" v-if="id"> 枪名称： {{name}}</div>
      
         <ModifyForm
        
        :editColumn="editColumn"
        :temporaryData='temporaryData'
        labelWidth="150px"
        :updateData="updateData"
      >
        <div
          slot="title"
        >
        
        </div>
        

      </ModifyForm>
    </div>
    </Panel>
  </div>
</template>
<script>
import Panel from "@/components/Panel";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
import FileUpload from '@/components/FileUpload';
import request from "@/tools/request";
import BaseMapSearch from '@/components/map/SearMap'

export default {
  name: 'gunextend',
  components: {
    FileUpload,
    Panel,
    ModalPanel,
    ModifyForm,
    BaseMapSearch
  },
  props: ["visible", "isEdit", "detail"],
  data() {
    return {
      name:'',
      id: '',
      gunIds:[],
      gunIds1:[],
      checkAll: false,
      isIndeterminate: true,
      pileList: [],
      siteList: [],
      siteId: '',
      productionDate:'',
      construction_time:'',
      constructionTime:'',
      siteDialog: false,
      primitiveData: {},
      officialRunTime:'',
      editorOption: {},
      typeList: [],
      temporaryData: {
        equipmentPurpose: 2,
        nationalStandard: true,
        equipmentPurpose: 1,
        vinFlag: true,
        equipmentClassification: 1,
        connectorType: 4,
      },
      editColumn: [
        {
          name: "设备接口分类",
          prop: "equipmentClassification",
          type: "radio",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id': 1,'name': "车辆充电设备接口"},{'id': 2,'name': "换电站内的电池箱充电设备接口"}],
          width:24,
          onChange: () => {},
          required: true
        }, 
        {
          name: "辅助电源",
          prop: "auxPower",
          type: "radio",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id': 1,'name': "12V"},{'id': 2,'name': "24V"},{'id': 3,'name': "兼容12V和24V"}],
          width:24,
          onChange: () => {},
          required: true
        },  
      ],
    };
  },
  computed: {
  },
  methods: {
    handleCheckAllChange(val) {
      console.log('val', val)
      let allIds = []
      if(val){
        allIds = this.pileList.map(item => { return item.id})
      }
        this.gunIds = val ? allIds : [];
        this.isIndeterminate = false;
      },
    getIds(value){
      console.log('value',value)
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
   async updateData(values) {
    console.log('gunIds',this.gunIds)
    let gunIds = this.gunIds
    // return
    //  let point = this.bdMapToTxMap(this.position.lng, this.position.lat)
    const  { connectorType, nationalStandard, equipmentClassification, auxPower } = values
    let datas = { connectorType, nationalStandard, equipmentClassification, auxPower }
    let id = this.id
    // let formData = new FormData()
    let dataF =[]
    if(this.id){
      dataF = {...datas, id}
      // formData.append('id', id)
    }else{
      if(gunIds.length <1){
        this.$message.error('请选择要编辑的枪')
        return  false
      }
      dataF = {'ext':datas, gunIds}
      // formData.append('ext.gunIds', 'gunIds')
    }
    
    // formData.append('ext.connectorType', 'connectorType')
    // formData.append('ext.nationalStandard', 'nationalStandard')
    // formData.append('ext.equipmentClassification', 'equipmentClassification')
    // formData.append('ext.auxPower', 'auxPower')
     let url = id ? "/manage/connector/extra/sichuansheng/update" : "/manage/connector/extra/sichuansheng/add"
     let msg = "编辑成功" 
     let res= await request({
       url: url,
       method: "POST",
       data:dataF
     })
     if(res.code !==0) return
      this.$message.success(msg)
      this.$router.go(-1)
    },
    async fetchTypelist(){
      const result = await GET('/type/getAll', {
        type: 2
      })
      this.editColumn[2].optionList = result
    },
    async fetchData(id){
      let {info}= await request({
       url: `/iot/ext/view/gun/${id}`,
       method: "GET",
     })
      
      //  console.log('--图片',info.address)
      this.temporaryData = info
      
    },
    async getSite(){
      let res= await request({
       url: `/iot/site/select`,
       method: "POST",
       data: {}
     })
      
      this.siteList = res.list
      
    },
    async getPile(){
      if(!this.siteId){return false}
      let res= await request({
       url: `/iot/pile/gun/select`,
       method: "POST",
       data:{site: this.siteId}
     })
      
      this.pileList = res.list
      
    },
      },
  created() {
   this.getSite()
  },
  mounted() {
    if(this.$route.query.id){
      this.id = this.$route.query.id
      this.name = this.$route.query.name
      this.fetchData(this.$route.query.id)
    }
    
  }
};
</script>

<style lang='scss' >
.contain{
    width: 100%;
    height: 600px;
    position: relative;
  }
.el-input--medium .el-input__inner {
		min-width: 180px;
		max-width: 220px !important;
	}
.amap-wrapper {
  width: 800px;
  height: 360px;
}
.autoAddressClass{
  li {
    i.el-icon-search {margin-top:11px;}
    .mgr10 {margin-right: 10px;}
    .title {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .address {
      line-height: 1;
      font-size: 12px;
      color: #b4b4b4;
      margin-bottom: 5px;
    }
  }
}
.pile {
  margin: 20px;
    background: #f3f3f3;
    padding: 15px;
    font-size: 13px;
    // display: flex;
}
.pile-mo{
  background: #ffffff;
    padding: 3px 14px;
    font-size: 15px;
    border-radius: 3px;
    border: 1px solid #1387ff;
}
.el-checkbox{
  background: white !important;
}
</style>
